﻿<template>
  <div class="box">
    <header>
      <div class="logo" @click="toCourses">
        <img v-if="isLogin" src="@/assets/imgs/LOGO/logo.png" alt="" />
        <img v-if="!isLogin" src="@/assets/imgs/LOGO/组 3.png" alt="" />
      </div>
      <router-link to="/courses">课程</router-link>
      <router-link to="/practice" v-if="!isLogin">练习平台</router-link>
      <router-link to="/loged" v-if="isLogin">练习平台</router-link>
      <router-link to="/community">社区资讯</router-link>
      <router-link to="/toLogin" v-if="!isLogin">登录 | 注册</router-link>
      <!-- <router-link to="/ENGLISG">ENGLISH</router-link> -->
      <router-link to="/message" v-if="isLogin">
        <span class="msg_box">
          <i class="iconfont icon-lingdang1"> </i>
          <el-badge :value="msgNum" class="item" v-if="msgNum > 0"> </el-badge>
        </span>
      </router-link>
      <span
        id="user"
        v-if="isLogin"
        @mouseenter="isUserInfoShow = true"
        @mouseleave="isUserInfoShow = false"
      >
        <span class="username">
          <router-link to="/userinfo">
            <img class="avatar" :src="userInfo.image" alt="" />{{
              userInfo.nickname
            }}
          </router-link></span
        >

        <span class="operate" v-if="isUserInfoShow">
          <span class="select_item" @click="toUserProfile">
            <i class="iconfont icon-gerenziliao"></i> 个人资料</span
          >
          <span class="select_item" @click="logOut"
            ><i class="iconfont icon-tuichu"></i> 退出</span
          >
        </span>
      </span>
    </header>
  </div>
</template>

<script>
import userUtils from '@/utils/userUtil'
import { sendPost } from '../../../utils/http'
import api from '@/config/api'
export default {
  data () {
    return {
      isLogin: userUtils.isLogin(),
      userInfo: userUtils.get(),
      swiperList: [],
      isUserInfoShow: false,
      msgNum: 0
    }
  },
  components: {
  },
  watch: {
    $route (to, from) {
      sessionStorage.setItem('activeIndex', to.path)
    },

    // msgNum () {
    //   if (sessionStorage.getItem('msgNum')) {
    //     this.msgNum = sessionStorage.getItem('msgNum')
    //   }else{
    //      this.getMessageNum()
    //   }
    // }

  },
  created () {
    // this.getMessageNum()
    if (this.isLogin) {
      this.getMessageNum()
    }
  },

  methods: {
    // 获取消息数量
    getMessageNum () {
      sendPost(api.getMessageNum, {}).then(res => {
        console.log(res);
        // this.msgNum = res.data
        // console.log(res.data.list.filter(item => {
        //   return item.state == '1'
        // }));
        this.msgNum = res.data
      })
    },
    toUserProfile () {
      this.$router.push('userprofile')
    },
    // 点击logo图标，返回首页
    toCourses () {
      this.$router.push('courses')
      this.activeIndex = 'courses'
      sessionStorage.setItem('activeIndex', 'courses')
    },
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    // 退出功能
    logOut () {
      window.sessionStorage.clear() // 清空缓存
      window.localStorage.clear() // 清空缓存
      this.$router.push('/') // 推到首页
      this.isLogin = false // 状态改为未登录
      sessionStorage.setItem('activeIndex', 'courses') // 设置高亮选中
      this.activeIndex = 'courses'
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  background-color: #fff;
}
header {
  // position: absolute;
  margin: auto;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 4.375rem;
  line-height: 4.375rem;
  font-size: 1.125rem !important;
  font-weight: bold;
  z-index: 200;

  .username {
    height: 4rem;
  }
  a {
    font-family: "PingFang SC", "Hiragino Sans GB", "Segoe UI",
      "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
      "Chinese Quote", -apple-system, BlinkMacSystemFont;
    color: #333;
    text-decoration: none;
    margin-right: 2.5rem;
    display: inline-block;
    font-size: 1.5rem;
    color: #333333;
    height: 100%;
    &.router-link-exact-active {
      border-top: 0.1875rem solid #ff5342;
      color: #ff5342;
    }
    &.router-link-active {
      border-top: 0.1875rem solid #ff5342;
    }
  }
  .logo {
    flex: 0.7;
    height: 100%;
    text-align: center;
    line-height: 4.0625rem;
    cursor: pointer;
    img {
      height: 3.625rem;
      vertical-align: middle;
    }
  }
  // .item {
  //   font-weight: bold;
  //   text-decoration: none;
  //   color: #666;
  //   padding: 0 1.25rem;
  //   display: inline-block;
  //   cursor: pointer;
  //   box-sizing: border-box;
  // }
}
// .el-menu {
//   background-color: transparent;
//   color: #333333;
// }
// .el-menu-item.is-active {
//   background-color: transparent !important;
// }
// .el-menu-item {
//   background-color: rgba(0, 0, 0, 0) !important;
//   font-size: 1.125rem;
// }
// .el-menu.el-menu--horizontal {
//   border-bottom: none;
// }
.icon-lingdang1 {
  color: #eee;
  font-size: 1.875rem;
}
// .msg_box {
//   position: relative;
// }

/deep/sup {
  top: -1.5em;
  right: 0.5625rem;
}
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.375rem;
}
.username {
  width: 8rem;
  a {
    display: inline-block;
    margin-left: 0.625rem;
    font-weight: bold;
    font-size: 1rem;
    color: #333333;
    width: 8rem;
    font-size: 1rem;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

#user {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 5rem;
  .operate {
    z-index: 99;
    position: absolute;
    background-color: #fff;
    border-radius: 0 0 0.3125rem 0.3125rem;
    right: -0.3225rem;
    top: 4.375rem;
    padding-left: 1.25rem;
    margin-left: 0.3125rem;
    line-height: 2.5rem;
    .select_item {
      display: inline-block;
      height: 1.25rem;
      line-height: 1.25rem;
      cursor: pointer;
    }
  }
}
</style>
